
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>default</title>
    <meta name="description" content="" />
    <meta name="generator" content="Studio 3 http://aptana.com/" />
    <meta name="author" content="vicanso" />

    <link rel="stylesheet" type="text/css" href="base.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.theme.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.interaction.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.accordion.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.buttonset.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.datepicker.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.dialog.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.dropdownlist.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.list.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.menu.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.progressbar.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.slide.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.tabs.css" />
    <link rel="stylesheet" type="text/css" href="theme/jquery.base.tip.css" />
    <style type="text/css">
        .uiItem
        {
            width:1000px;
            margin:auto;
            clear:both;
        }
        .uiItem .title
        {
            border-bottom:1px solid black;
            margin:5px auto;
        }
        .uiItem .demos
        {
            width:600px;
            margin-left:400px;
        }
        .uiItem .desc
        {
            width:400px;
            float:left;
        }
        #accordion1
        {
            width:300px;
        }
        #dropDownList1
        {
            width:150px;
        }
        #menu1 a
        {
            color:white;
        }
        #progressBar1
        {
            height:10px;
        }
        #slide1
        {
            height:10px;
        }
    </style>
</head>
<body>
<div class="uiItem">
    <h2 class="title">Accordion</h2>
    <div class="desc">Accordion </div>
    <div class="demos">
        <div id="accordion1">
            <div title="WebM格式大提升WebM格式大提升WebM格式大提升WebM格式大提升">
                <p>
                    今年早期，Google终于做出了一件众所期待的行动：发布了开源的VP8编码器。它成为WebM项目的一部分，后者在一个Matroshka容器中结合了VP8视频与Vorbis音频。WebM项目的产品管理者John Luther给出了项目进展情况——情势非常好。
                </p>
            </div>
            <div title="WebM格式大提升WebM格式大提升WebM格式大提升WebM格式大提升">
                <p>
                    WebM见证了一个非常令人难以置信的接受率。它以这样或那样的方式被所有的桌面浏览器所支持；天生就在Firefox, Opera 和 Chrome可用， IE9和Safari用户安装一个编码器也便可用。它成为了Ffmpeg的一部分，运行在x86, ARM 和 PowerPC上，被Windows, Mac OS X, Linux, 和 Android所支持。还有支持DirectShow, Windows Media Foundation, QuickTime 和 gstreamer的编码器。
                </p>
            </div>
            <div title="WebM格式大提升">
                <p>
                    已经有20个新的合作伙伴了，还有更多伙伴待加入。可以想见的是，WebM前头有着一个非常明媚的春光。第一款VP8 ASIC芯片有望在来年第一季问世，几乎所有大的芯片制造商将有提供。
                </p>
            </div>
            <div title="WebM格式大提升">
                <p>
                    而且，80% YouTube日常视频已经采用了WebM格式。“我们在努力转码整个YouTube视频库，”Luther说。当然，很少有人看的视频在待转化列表中会排较低优先级。但是最终，它们也会被转码成WebM。
                </p>
            </div>
            <div title="WebM格式大提升">
                <p>
                    那，WebM所持的发展前路将有怎样一幅图景呢？主要会是大量的改进。Google正努力提升解码速度——当前版本饱经争议的弱点，使之有平均28%的提高。他们同时致力于改善相关开发工具。
                </p>
            </div>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">ButtonSet</h2>
    <div class="demos">
        <div id="buttonSet1">
            <a href="javascript:;">按钮一</a><a href="javascript:;">按钮二</a><a href="javascript:;">按钮三</a><a href="javascript:;">按钮四</a>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">Dialog</h2>
    <div class="demos">
        <div id="dialog1">
            <div>
                <p>北京时间11月14日消息，根据国外媒体报道，下周即将在美国旧金山举行的Web 2.0大会上，目前互联网的两大巨头谷歌与Facebook将分别公布各自对下一代互联网服务的展望</p>
                <input type="text" />
            </div>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">DropDownList</h2>
    <div class="demos">
        <div id="dropDownList1">
            <ul>
                <li>选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
                <li>选项五</li>
                <li>选项六</li>
                <li>选项七</li>
                <li>选项八</li>
                <li>选项九</li>
                <li>选项十</li>
            </ul>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">List</h2>
    <div class="demos">
        <div id="list1">
            <div>
                <ul number="0">
                    <li number="1">列表1</li>
                    <li number="2">列表2</li>
                    <li>列表3</li>
                    <li>列表4</li>
                    <li>列表5</li>
                    <li>列表6</li>
                    <li>列表7</li>
                    <li>列表8</li>
                    <li>列表9</li>
                    <li>列表10</li>
                </ul>
                <ul number="1">
                    <li number="2">列表11</li>
                    <li>列表11</li>
                    <li>列表31</li>
                    <li>列表41</li>
                    <li>列表5</li>
                    <li>列表6</li>
                    <li>列表7</li>
                    <li>列表8</li>
                    <li>列表9</li>
                    <li>列表10</li>
                </ul>
                <ul number="2">
                    <li>列表22</li>
                    <li>列表22</li>
                    <li>列表31</li>
                    <li>列表41</li>
                    <li>列表5</li>
                    <li>列表6</li>
                    <li>列表7</li>
                    <li>列表8</li>
                    <li>列表9</li>
                    <li>列表10</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">Menu</h2>
    <div class="demos">
        <div id="menu1">
            <ul>
                <li><a href="#">主页</a></li>
                <li>
                    <a href="#">个人相关</a>
                    <ul>
                        <li><a href="#">我的博客</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">My Test</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">测试</a>
                    <ul>
                        <li><a href="#">文本测试</a></li>
                        <li><a href="#">音乐</a></li>
                        <li><a href="#">电影</a></li>
                        <li><a href="#">图片</a></li>
                    </ul>
                </li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">ProgressBar</h2>
    <div class="demos">
        <div id="progressBar1"></div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">Slide</h2>
    <div class="demos">
        <div id="slide1"></div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">Tabs</h2>
    <div class="demos">
        <div id="tabs1">
            <div title="标题一">
                <p>
                    北京时间11月14日消息，根据国外媒体报道，下周即将在美国旧金山举行的Web 2.0大会上，目前互联网的两大巨头谷歌与Facebook将分别公布各自对下一代互联网服务的展望。最近恩怨不断的两大对手将在这次全球瞩目的大会上扮演属于自己的重要角色。

                    近 一段时间，这两大互联网旗帜性公司之间的关系日趋紧张。Facebook将在下周一的大会上推出自有电子邮件客户端Project Titan，为用户提供后缀为@facebook.com 的电子邮件服务。考虑到Facebook的全球用户已达5亿，其此举无疑对谷歌Gmail构成了巨大威胁。因此双方的互联网之战愈演愈烈。
                </p>
            </div>
            <div title="标题二">
                <p>
                    下周一开幕的Web 2.0大会为期三天，包括Facebook首席执行官马克扎克伯格(Mark Zuckerberg)和谷歌CEO埃里克施密特(Eric Schmidt)在内的全球数十位互联网领域的重量级人物都将登台发表演讲。

                    近日围绕着多家私募股权公司联合收购雅虎旗下业务的报道不断，收购方还很有可能牵涉到AOL或新闻集团。因此下周二雅虎CEO卡罗尔巴茨(Carol Bartz)在此次大会上的讲话就格外引人注目。

                    投资者们同样期待着新一代快速发展起来的初创企业能够掀起年内最后一轮IPO浪潮，因此来自Twitter、Zynga和LinkedIn的高管们也将受到格外关注。
                </p>
            </div>
            <div title="标题三">
                <p>
                    然而扎克伯格与施密特以及两家公司之间对互联网用户的上网时间、广告市场和日趋昂贵的科技人才的争夺却是人们关注的重中之重。

                    投资者们翘首期盼着能够获知谷歌进军社交领域的具体策略。近几个月来，谷歌已经收购了数个小型社交企业。施密特此前也表示，该公司将于今年秋季在其目前的产品中加入社交元素。
                </p>
            </div>
            <div title="标题四">
                <p>
                    然而扎克伯格与施密特以及两家公司之间对互联网用户的上网时间、广告市场和日趋昂贵的科技人才的争夺却是人们关注的重中之重。

                    投资者们翘首期盼着能够获知谷歌进军社交领域的具体策略。近几个月来，谷歌已经收购了数个小型社交企业。施密特此前也表示，该公司将于今年秋季在其目前的产品中加入社交元素。
                </p>
            </div>
            <div title="标题五">
                <p>
                    然而扎克伯格与施密特以及两家公司之间对互联网用户的上网时间、广告市场和日趋昂贵的科技人才的争夺却是人们关注的重中之重。

                    投资者们翘首期盼着能够获知谷歌进军社交领域的具体策略。近几个月来，谷歌已经收购了数个小型社交企业。施密特此前也表示，该公司将于今年秋季在其目前的产品中加入社交元素。
                </p>
            </div>
        </div>
    </div>
</div>
<div class="uiItem">
    <h2 class="title">DatePicker</h2>
    <div class="demos">
        <div id="datePicker1"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.base.core.js"></script>
<script type="text/javascript" src="js/jquery.base.effect.js"></script>
<script type="text/javascript" src="js/jquery.base.event.js"></script>
<script type="text/javascript" src="js/jquery.base.interaction.js"></script>
<script type="text/javascript" src="js/jquery.base.widget.js"></script>
<script type="text/javascript" src="js/jquery.base.accordion.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.buttonset.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.datepicker.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.dialog.js"></script>   <!--1-->
<script type="text/javascript" src="js/jquery.base.dropdownlist.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.list.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.menu.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.position.js"></script>
<script type="text/javascript" src="js/jquery.base.progressbar.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.slide.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.tabs.js"></script> <!--1-->
<script type="text/javascript" src="js/jquery.base.tip.js"></script>
<script type="text/javascript">
    $(function()
    {
        $("#accordion1").accordion({
            title : "Accordion"
        });
        $("#buttonSet1").buttonSet();
        $("#dialog1").dialog({
            title : "对话框",
            buttonSet : {
                "确定" : function(){},
                "取消" : function(){}
            }
        });
        $("#dropDownList1").dropDownList({
            showAll : true
        });
        $("#list1").list({
            title : "列表"
        });
        $("#menu1").menu();
        $("#progressBar1").progressBar({
            value : 0.4
        });
        $("#slide1").slide();
        $("#tabs1").tabs();
        $("#datePicker1").datePicker();
    });
</script>
</html>
